<template>
    <div>
        <el-main>
            <div class="font12 device_tab pull-right pl pr pb">
                <div>
                    <div style="padding:5px;display:inline-block">
                        <span style="color:#1250cc"></span>
                    </div>
                    <div style="display:inline-block;float:right;padding:5px 0;">
                        <div class="table-opt-key" v-on:click="add">
                            <i class="el-icon-plus"></i>
                            <span>添加</span>
                        </div>
                        <!--                    <div class="device-oper-li" v-on:click="add('edit')">-->
                        <!--                        <li class="iconfont iconbianji"></li>-->
                        <!--                        <span>编辑信息</span>-->
                        <!--                    </div>-->
                        <div class="table-opt-key" @click="deleteTable">
                            <!--                        <li class="iconfont iconiconfontshanchu"></li>-->
                            <i class="el-icon-delete"></i>
                            <span>删除</span>
                        </div>
                    </div>
                </div>
                <div>
                    <el-table
                            :data="tableData"
                            @row-click="clickRow"
                            ref="multideviceTable"
                            border
                            resizable
                            style="width: 100%;"
                            @selection-change="handleSelectionChange"
                    >
                        <el-table-column
                                label="全选"
                                show-overflow-tooltip
                                type="selection"
                                prop="number"
                                width="40"
                        ></el-table-column>
                        <el-table-column type="index" label="序号" width="50">
                            <template slot-scope="scope">
                                <!--<span>{{(currentPage - 1) * limit + scope.$index + 1}}</span>-->
                                <span>{{scope.$index + 1}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip prop="name" label="名称" sortable></el-table-column>
                        <el-table-column show-overflow-tooltip prop="description" label="描述" sortable></el-table-column>
                        <!--:filters="this.description" filter-method="" -->
                        <el-table-column show-overflow-tooltip prop="type" label="训练类型" sortable></el-table-column>
                        <!--                    <el-table-column show-overflow-tooltip prop="disposalInfo" label="处置步骤"></el-table-column>-->

                        <el-table-column show-overflow-tooltip label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button
                                        size="mini"
                                        type="success"
                                        @click="handleDelete(scope.$index, scope.row)">开始执行</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页 start -->
                    <my-pagination
                            :total="total"
                            :current-page="currentPage"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                    ></my-pagination>

                    <!-- 分页 end -->
                </div>
            </div>
        </el-main>
        <task-add ref="mychild" :dialogVisible="dialogFormVisible" @close="clsDialog"></task-add>
       <!-- <ensure-dialog
                v-bind:ensureDialogVisible="deleteDialog"
                v-bind:message="'确定要删除吗?'"
                @ensureFn="deleteTableRows"
        ></ensure-dialog>-->
<!--        <look ref="mylook" :dialogVisible="dialogLookVisible" @close="clsDialog"></look>-->
        <el-main>
            <el-collapse v-model="activeNames" @change="">

                <el-collapse-item title="控制台" name="1">
<!--                    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>-->
<!--                    <div id="terminal" ref="terminal"style="width: 100%;height: 500px"></div>-->
                    <div id="terminal" style="margin-bottom: 2px" ref="terminal"></div>
                </el-collapse-item>

            </el-collapse>
<!--            <div id="terminal" ref="terminal"></div>-->
        </el-main>
    </div>

</template>

<script>
    import task_train_add from "./task_train_add"
    import { Terminal } from "xterm"
    import "xterm/css/xterm.css"
    import "xterm/lib/xterm.js"
    // import * as fit from 'xterm/lib/addons/fit/fit'
    let term
    export default {
        components: {
            "task-add": task_train_add
        },
        data() {
            return {
                rules: {
                    description: [
                        // { required: true, message: "请输入描述信息", trigger: "change" }
                    ],
                    name: [
                        // { required: true, message: "名称不能为空！", trigger: "change" }
                    ],
                    // featureSelection: [
                    //     {required: true, message: '请选择', trigger: 'change' }
                    // ],
                    systemSelection: [
                        // { required: true, message: "请选择应用系统!", trigger: "change" }
                    ]
                },
                todos: [{ ipS: [], operationid: [], optList: [] }],
                ifok:true,
                list: [{ stepName: "", ips: "", operationId: "" }], //"1.1.1.1 : stopWas.sh"
                steps: {}, //"name":["1.1.1.1 : stopWas.sh"]
                activeNames: ['1'],
                formLabelWidth: "120px",
                dialogFormVisible: false,
                dialogLookVisible: false,
                deleteDialog: false,
                isEdit: false,
                editId: -1,
                ipList: [],
                optList: [],
                operationName: "",
                frequency: "",
                form: {
                    name: "",
                    description: "",
                    systemOptions: [],
                    systemSelection: "",
                    featureOptions: [],
                    featureSelection: "",
                    ipSelection: [],
                    id: [],
                    stepName: "",
                    header: ""
                },
                systemList: [],
                currentPage: 1,
                total: 250,
                tableData: [{name: "33",description: "dddddd",type: "分割"},{name: "33",description: "dddddd",type: "检测"},{name: "33",description: "dddddd",type: "分类"}],
                offset: 0,
                limit: this.$store.state.pageLimit,
                multipleSelection: [],
                orderName: "name",
                rowDisposalInfo: ""
            };
        },
        methods: {
            clickRow(row) {
                //点击表格行，勾选前面的复选框
                // this.$refs.multideviceTable.toggleRowSelection(row);
            },
            resetForm() {
                this.dialogFormVisible = false;
                this.$refs.form.resetFields();
            },
            async add(arg) {
                if(arg=="edit"){
                    if(this.multipleSelection.length!=1){
                        this.$message("请选择一条数据")
                    }else{
                        this.dialogFormVisible=true;
                        this.$refs.mychild.isEdit=true;
                        let data = this.multipleSelection[0]
                        this.$refs.mychild.form.systemSelection=data.systemId;
                        this.$refs.mychild.form.description=data.description;
                        this.$refs.mychild.form.featureSelection=data.path;
                        this.$refs.mychild.editId=data.id;
                    }
                }else{
                    this.dialogFormVisible=true;
                    this.$refs.mychild.isEdit=false;
                }
            },
            addSave() {
                this.$refs.form.validate(valid => {
                    // if(this.stepNames.length==0){
                    //     this.$message("请添加处置步骤信息");
                    //     return;
                    // }

                    if (valid) {
                        let params = {};
                        this.steps = this.list;
                        params["disposalInfo"] = JSON.stringify(this.steps);
                        params["name"] = this.form.name;
                        params["description"] = this.form.description;
                        params["systemId"] = this.form.systemSelection;
                        // params["featureId"] = this.form.featureSelection

                        if (this.isEdit) {
                            params["id"] = this.editId;
                            editDevicesOper(params).then(res => {
                                if (res.data.message == "参数校验错误") {
                                    this.$message({
                                        showClose: true,
                                        message: "该多设备操作名称已存在！",
                                        type: "warning"
                                    });
                                } else {
                                    this.$refs.form.resetFields();
                                    this.updateTable();
                                    this.dialogFormVisible = false;
                                }
                            });
                        } else {

                            //多设备操作重名验证
                            this.todos.forEach((item, i) => {
                                if (this.todos[i].ipS.indexOf(" ") >= 0 || this.todos[i].ipS.indexOf(null) >= 0 ||
                                    this.todos[i].ipS == "" ||
                                    this.todos[i].ipS == null) {
                                    this.$message({
                                        showClose: true,
                                        message: "请选择IP地址！",
                                        type: "warning"
                                    });
                                    this.ifok= false
                                } else if(
                                    this.todos[i].operationid == "" ||
                                    this.todos[i].operationid == null
                                ) {
                                    this.$message({
                                        showClose: true,
                                        message: "请选择操作名称！",
                                        type: "warning"
                                    });
                                    this.ifok= false
                                }else{
                                    this.ifok= true
                                }
                            });
                            if(this.ifok) {
                                DuplicateDeviceLists({ Name: this.form.name }).then(rsp => {
                                    if (rsp.data.message == "数据存在") {
                                        this.$message({
                                            showClose: true,
                                            message: "该多设备操作名称已存在！",
                                            type: "warning"
                                        });
                                    } else {
                                        //添加设备
                                        addDevicesOper(params).then(res => {
                                            this.$reset.form;
                                            this.updateTable();
                                        });
                                        this.dialogFormVisible = false;
                                    }
                                });
                            }
                        }
                    } else {
                        this.$message("有未填写信息");
                    }
                });
            },
            Close() {
                this.dialogFormVisible = false;
                this.$refs.form.resetFields();
            },
            handleSizeChange(val) {
                this.limit = val;
                this.updateTable();
            },

            import_device() {
                this.deviceImportVisible = true;
            },
            handleCurrentChange(val) {
                this.offset = (val - 1) * this.limit;
                this.currentPage = val;
                this.updateTable();
            },
            updateTable() {
                devicesOperList({
                    offset: this.offset,
                    limit: this.limit,
                    orderName: this.orderName
                }).then(res => {
                    this.tableData = res.data.data;
                    this.total = res.data.total;
                });
            },
            deleteTable() {
                let selection = this.$refs.multideviceTable.selection;
                if (selection.length > 0) {
                    this.deleteDialog = true;
                } else {
                    this.deleteDialog = false;
                    //未选择数据，点击删除按钮的提示信息
                    this.$message({
                        showClose: true,
                        message: "请选择要删除的数据！",
                        type: "warning"
                    });
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            OptList(index) {
                this.frequency = index;
                let ips = [];
                this.ipList.forEach((item, i) => {
                    if (this.todos[index].ipS.indexOf(item.id) >= 0) {
                        ips.push(item.ipAddress);
                    }
                });
                let step_information = {};
                this.todos[index].optList.forEach((item, i) => {
                    if (this.todos[index].operationid == item.id) {
                        this.operationName = item.operationName;
                    }
                });
                this.list[index].stepName = this.operationName;
                this.list[index].ips = ips.join(",");
                this.list[index].operationId = this.todos[index].operationid;
                // step_information.stepName = this.operationName;
                // step_information.ips = ips.join(",");
                // step_information.operationId = this.todos[index].operationid;
                // this.list.push(step_information);
            },


            clsDialog() {
                this.dialogLookVisible = false;
            }
        },
        mounted() {
            term = new Terminal({
                rendererType: "canvas", //渲染类型
                rows: 30, //行数
                // cols: parseInt(_this.cols), // 不指定行数，自动回车后光标从下一行开始
                convertEol: true, //启用时，光标将设置为下一行的开头
                //   scrollback: 50, //终端中的回滚量
                disableStdin: false, //是否应禁用输入。
                cursorStyle: "underline", //光标样式
                cursorBlink: true, //光标闪烁
                theme: {
                    foreground: "#7e9192", //字体
                    background: "#002833", //背景色
                    cursor: "help", //设置光标
                    lineHeight: 16
                }
            });
            // 挂载到dom
            term.open(this.$refs["terminal"]);
            term.writeln("Welcome to use Superman... ");
            // term.fit();
        }
    };
</script>

<style scoped>


    /*.device_tab {*/
    /*    border: 1px solid #e5e6eb;*/
    /*    height: 100%;*/
    /*    width: 100%;*/
    /*    position: relative;*/
    /*}*/






</style>